<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <SearchBar :show-search="true">
      <template slot="peopleSearch">
        <el-form-item label="人员搜索：">
          <el-row type="flex">
            <el-input placeholder="请输入" style="width: 300px;" />
          </el-row>
        </el-form-item>
      </template>
    </SearchBar>
    <!-- 新增 -->
    <el-card v-loading="loading">
      <!-- 新增按钮 -->
      <el-row>
        <el-col>
          <el-button type="warning" @click="showDialog=true">
            <i class="el-icon-circle-plus-outline" /> 新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格表单 -->
      <el-row>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%;padding-top: 20px; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="userName"
            label="人员名称"
            width="180"
          />
          <el-table-column
            prop="regionName"
            label="归属地址"
          />
          <el-table-column
            prop="role.roleName"
            label="角色"
          />
          <el-table-column
            prop="mobile"
            label="联系电话"
          />
          <el-table-column

            label="操作"
            width="100"
          >
            <template>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small" style="color: red;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <el-dialog
      title="新增人员"
      :visible="showDialog"
      width="600px"
      @close="closeDialog"
    >
      <!-- form表单 -->
      <div class="el-dialog-div">
        <el-form
          ref="form"
          :model="formData"
          label-width="80px"
          size="small"
          :rules="rules"
        >
          <!-- 人员名称 -->
          <el-form-item label="人员名称" style="width: 500px;" prop="userName">
            <el-input v-model="formData.userName" placeholder="请输入" />
          </el-form-item>
          <!-- 角色 -->
          <el-form-item label="角色" style="width: 500px;" prop="role">
            <el-select v-model="formData.roleId" placeholder="请选择">
              <el-option
                v-for="item in roleList"
                :key="item.roleCode"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <!-- 联系电话 -->
          <el-form-item label="联系电话" style="width: 500px;" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入" />
          </el-form-item>
          <!-- 负责区域 -->
          <el-form-item label="负责区域" style="width: 500px;" prop="area">
            <el-select v-model="formData.reginName" placeholder="请选择">
              <el-option v-for="item in areaList" :key="item.id" :label="item.remark" :value="item.name" />
            </el-select>
          </el-form-item>
          <!-- 头像 -->
          <el-form-item label="头像" prop="avatar">
            <el-upload
              class="avatar-uploader boxUpload"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-upload " />
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="状态">
            <el-checkbox v-model="formData.status">是否启用</el-checkbox>
          </el-form-item>
          <!-- 按钮 -->
          <el-row class="TwoButton">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submitOK">确 定</el-button>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import { getPeopleAPI, getRolesAPI, getAreasAPI, imageSave } from '@/api/people'
export default {
  components: {
    SearchBar
  },
  data() {
    return {
      // 角色表单值
      roleValue: '',
      // 地区表单值
      areaValue: '',
      // 表格数据
      tableData: [],
      // 页数
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      // 总页数
      total: null,
      loading: false,
      // 模态框数据
      formData: {
        userName: '',
        roleId: '',
        mobile: '',
        reginName: '',
        status: ''

      },
      // 开启模态框
      showDialog: false,
      // 图片地址
      imageUrl: '',
      // 状态的选中情况
      checked: false,
      // 角色数据
      roleList: [],
      // 地区数据
      areaList: [],
      // 定义校验规则
      rules: {
        userName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        role: [{ required: true, message: '请至少选择一个', trigger: 'blur' }],
        mobile: [{ required: true, message: '电话号码不能为空', trigger: 'blur' },
          { min: 1, max: 11, message: '电话要求1-11个数字', trigger: 'blur' }],
        area: [{ required: true, message: '请至少选择一个', trigger: 'blur' }],
        avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }]
      },
      fileName: ''

    }
  },
  created() {
    this.getPeople()
    this.getRoles()
    this.getArea()
  },
  methods: {
    // 获取人员列表
    async  getPeople() {
      this.loading = true
      const res = await getPeopleAPI(this.pageConfig)
      this.tableData = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      this.total = +res.data.totalCount
      this.loading = false
    },
    // 获取角色列表数据
    async getRoles() {
      const res = await getRolesAPI()
      this.roleList = res.data
    },
    // 页码改变触发
    currentChange(newPage) {
      // 设置最新页码参数
      this.pageConfig.pageIndex = newPage
      // 重新获取数据列表，并展示第newPage页面的数据列表中的内容
      this.getPeople()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // console.log(file)
      this.fileName = file
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 关闭模态框
    closeDialog() {
      this.showDialog = false
    },
    // 获取地区
    async  getArea() {
      const res = await getAreasAPI()
      this.areaList = res.data.currentPageRecords
    },
    // 确认按钮
    async  submitOK() {
      // const res = await addPeopleAPI({ ...this.formData, image: this.imageUrl })
      this.getImgage()
    },
    async getImgage() {
      const formData = new FormData() // 创建form表单对象，用于上传图像的数据操作
      formData.append('fileName', this.fileName.raw) // 将图像文件的名称添加到表单中
      const files = await imageSave(formData)
      console.log(files)
    }

  }

}
</script >

<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}
.el-table__header {
  background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar {
      width: 80px;
      height: 80px;
      display: block;
    }
  }
 ::v-deep .el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    line-height: 80px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .TwoButton {
    text-align: center;
  }

</style>
